<template>
    <div class="order-item">
        <div class="title clearfix">
            <span class="float-left">{{order.created | formatDate}}</span>
            <div class="float-right">
                <router-link v-if="label == 'list'" :to="{name: 'orderDetail', params: {id: order.id}}">{{$t('coupon.coupon.txt2')}}</router-link>
                <ContactUs></ContactUs> 
            </div>
        </div>
        <el-row class="detail">
            <el-col :span="15">
                <product-detail :prd="order"></product-detail>
            </el-col>
            <el-col :span="6" class="bind-txt" style="text-align: center" v-if="order.status == 0">
                <span>have chosen the coupon</span>
            </el-col>
            <el-col :span="3" style="text-align: right" v-if="order.status == 0">
                <router-link :to="{path: '/product/submit/' + order.id}" class="order-btn aip-green-btn">{{$t('order.btn2')}}</router-link>
                <a href="javascript:;" @click="cancelOrderHandle" class="order-btn aip-white-btn">{{$t('order.btn3')}}</a>
            </el-col>

            <el-col :span="6" class="bind-txt" style="text-align: center" v-if="order.status == 4">
                <span>Cash Back completed</span>
            </el-col>

            <el-col :span="6" class="bind-txt" style="text-align: center" v-if="order.status == 2">
                <span>order passed</span>
            </el-col>
            <el-col :span="6" class="bind-txt" style="text-align: center" v-if="order.status == 5">
                <span>order canceled</span>
            </el-col>
             <el-col :span="6" class="bind-txt" style="text-align: center" v-if="order.status == 3">
                <span>rejected</span>
            </el-col>
            <el-col :span="6" class="bind-txt" style="text-align: center" v-if="order.status == 1">
                <span>qualifying</span>
            </el-col>
            <el-col :span="3" style="text-align: right" v-if="order.status == 3">
                <router-link :to="{path: '/product/submit/' + order.id}" class="order-btn aip-green-btn" style="margin-top: 13px;">apply again</router-link>

            </el-col>
        </el-row>
    </div>

</template>

<script>
    import { cancelOrder } from '@/api/c'
    import productDetail from '../../product/component/detail.vue';
    import ContactUs from '../../../../components/ContactUs/index.vue';

    export default {
        props: {
            order: {
                type: Object,
                default: function (argument) {
                    return {}
                }
            },
            label: {
                type: String,
                default: ''
            }
        },
        components: { productDetail, ContactUs },
        data() {
        return {

        }
    },
    created() {
    },
    methods: {
        cancelOrderHandle() {
            this.$confirm('Are you sure to cancel the order?', 'Prompt', {
              confirmButtonText: 'confirm',
              cancelButtonText: 'cancel',
              type: 'warning'
            }).then(() => {
              cancelOrder({orderId: this.order.id + ""}).then(response => {
                  this.$emit('getList');
              })
            }).catch(() => {
              this.$message({
                type: 'info',
                message: 'Canceled deleting'
              });          
            });
            
        }
    }
    }
</script>
<style scoped>
    p {
        margin: 0;
    }
    .order-item {
        width: 826px;
        height: 128px;
        border: 1px solid #EBEDF8;
        background: rgba(235,237,248,0.24);
        color: #333333;
        margin-top: 16px;
    }
    .order-item .title {
        height: 25px;
        line-height: 25px;
        font-size: 12px;
        background: #EBEDF8;
        padding: 0 24px;
    }
    .order-item .title a {
        color: #3DBDB6;
    }
    .order-item .title a:nth-of-type(2) {
        margin-left: 30px;
    }
    .order-item .detail {
        padding: 24px;
    }
    .bind-txt {
        padding-top: 14px;
    }
    .bind-txt span {
        color: #FFA000;font-size: 13px;
    }
    .order-btn {
        width: 75px;
        padding: 0;
    }
    .order-item .aip-white-btn {
        margin-top: 9px;
    }
</style>
<style type="text/css">


</style>

